<template>
  <div class="regbg">
    <div class="bj">
      <div class="login">
        <div class="logo">
          <img src="/img/1_03.jpg" alt="" />
        </div>
        <input
          class="input1"
          type="text"
          placeholder="请输入手机号码"
          v-model="user.phone"
        /><br />
        <input
          v-model="user.password"
          class="input2"
          type="text"
          placeholder="密码为8-16个字符(数字、大小写字母、符号至少包含三种)"
        /><br />
        <div class="message">
          <input type="checkbox" checked />我已阅读并接受<a href="#">用户协议</a
          >和<a href="#">隐私攻策</a>
        </div>

        <button class="btn" @click="sendReg">提交</button>
        <div class="new_re">
          <span>已有账号，<a href="#/Login">直接登录</a></span>
        </div>
      </div>
    </div>
    <div class="footer">
      <img src="/img/2_07.jpg" alt="" />
    </div>
    <div class="tip-login" v-show="flag">
      <a class="xx" href="javascript:void(0)" @click="flag = false">x</a
      ><span class="tip-message">{{ message }}</span>
    </div>
  </div>
</template>

<script>
import { postreg } from '../api/user'
export default {
  data() {
    return {
      user: { password: '', phone: '' },
      flag: false,
      message: ''
    }
  },
  methods: {
    async sendReg() {
      let {
        data: { message }
      } = await postreg(this.user)
      console.log(message)
      this.message = message
      this.flag = true
      setTimeout(() => {
        this.$router.push({ path: 'Login' })
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
.regbg {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  overflow: hidden;
}
body {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}
.login {
  width: 850px;
  height: 490px;
  background-color: white;
  margin: 0px auto;
  margin-top: 100px;
  overflow: hidden;
}
.logo {
  margin-left: 370px;
  margin-top: 44px;
}
.text p {
  color: #e8380d;
  margin-left: 370px;
  margin-top: 20px;
}
.input1,
.input2 {
  width: 360px;
  height: 50px;
  margin-top: 30px;
  margin-left: 245px;
  border: #e0e4e7 1px solid;
  color: #757575;
  padding-left: 10px;
}
.message {
  margin-top: 26px;
  margin-left: 245px;
}
.message a {
  color: #e8380d;
}
.btn {
  width: 370px;
  height: 50px;
  margin-top: 24px;
  margin-left: 245px;
  background-color: #e8380d;
  border: none;
  color: #ffffff;
  font-size: 18px;
}

.new_re span {
  display: inline-block;
  font-size: 16px;
  margin-left: 467px;
  margin-top: 26px;
}
.new_re a {
  color: #e8380d;
}
.loginth {
  margin-left: 244px;
  margin-top: 24px;
}
.footer {
  width: 850px;
  margin: 0px auto;
}
.footer img {
  margin-left: 80px;
  margin-top: 64px;
}
/* 提示框 */
.tip-login {
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: #e8380d;
  // width: 200px;
  padding: 0 60px;
  height: 120px;
  text-align: center;
  line-height: 120px;
  transform: translate(-50%, -50%);
  z-index: 999;
  // border: 1px solid #333;
  border-radius: 10px;
  font-size: 24px;
  color: white;
}
.xx {
  position: absolute;
  right: 3px;
  top: 3px;
  line-height: 10px;
}
.none {
  display: none;
}
</style>
